<template>
    <div class="responsive-layout">
        <div class="kp">
            <div class="responsive-layout">
                <el-card class="box-card" v-loading="loading">
                    <div class="item">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">

                            <el-form-item label="进货订单">
                                <el-input style="width: 130px;" v-model="formInline.user" placeholder="审批人"></el-input>
                            </el-form-item>


                            <el-form-item label="供应商">
                                <el-select v-model="formInline.GYS" clearable placeholder="请选择"
                                    :style="{ width: '200px' }">
                                    <el-option v-for="item in GYSdate" :key="item.supply_code" :label="item.supply_name"
                                        :value="item.supply_name">
                                    </el-option>
                                </el-select>
                            </el-form-item>




                            <el-form-item label="进货日期">
                                <el-date-picker style="width: 280px;" v-model="value1" type="daterange" />

                            </el-form-item>




                        </el-form>

                        <!-- 操作按钮 -->
                        <el-row>

                            <div class="grid-content bg-purple">
                                <div style="margin-bottom: 10px;">
                                    <el-button type="success" @click="XinZen()">新增</el-button>
                                    <el-button @click="Delete()">删除</el-button>
                                    <el-button>启用</el-button>
                                    <el-button @click="ShenHeTankuang()">停用</el-button>

                                </div>
                            </div>

                        </el-row>

                        <div><!-- 表单数据-->

                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column prop="u_useriD" label="编号"></el-table-column>
                                <el-table-column prop="u_rolesname" label="姓名"></el-table-column>

                                <el-table-column fixed="right" label="操作">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text"
                                            size="small">编辑</el-button>
                                        <el-button type="danger" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-drawer title="新增" :visible.sync="drawer1" size="35%">
                                <!-- 卡片 -->
                                <el-card class="box-card" style="width: 95%; margin: 0 auto">
                                    <div>
                              <a>角色名称</a> <el-input  style="width: 200px;height: 50px"></el-input>
                                <el-tree :data="treeData" show-checkbox node-key="id"
                                    :default-expanded-keys="defaultExpandedKeys"
                                    :default-checked-keys="defaultCheckedKeys" :props="defaultProps"></el-tree>
                                    </div>
                                </el-card>
                               
                                <div style="float: right; margin-right: 40px; margin-top: 40px">
                                    <el-button @click="drawer = false">取消</el-button>
                                    <el-button type="success">保存</el-button>
                                </div>
                            </el-drawer>





                        </div>
                    </div>
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>
import moment from 'moment';
import $http from '@/http/base.js';
export default {
    data() {
        return {
            treeData: [], // 用于存储从API获取到的树形结构数据  
            defaultExpandedKeys: [], // 初始展开的节点ID列表  
            defaultCheckedKeys: [], // 初始选中的节点ID列表  
            defaultProps: { // 设置el-tree如何解释数据  
                children: 'children',
                label: 'authName'
            },
            drawer1: false,
            Adate: [],
            formInline: {
                region: '\0',
                GYS: '',
                user: '',
            },
            //时间控件转换格式
            value1: [],
            qsj: '',
            hsj: '',
            mys: 4,
            dqy: 1,
            zts: 0,
            GYSdate: [],
            xs: {
                sure_date: true,
                sure_man: true,
                create_time: true,
                create_by: true,
                item_names: true,
                zjg: true,
                sl: true,
                buy_man: true,
                link_way: true,
                link_man: true,
                supply_name: true,
                buy_date: true,
                sure_state: true,
                buy_code: true
            },
            Idbh: [],//存储批量编号
            Ztzd: [],//储存批量状态
            kuang: false,//默认关闭弹框
            ShenHezt: '',
            ShenHeyj: '',
            ShenHeman: '',
            ShenHesj: '',
            loading: true//刷新加载
            , tableData: []
        }
    },
    methods: {
        XinZen() {
            this.drawer1 = true;
        },
        //树状结构
        quanxian() {
            // 假设$http是一个可用的HTTP请求工具  
            $http
                .get('api/rbac_User/TressSelect') // 调用API获取树形数据  
                .then((response) => {
                    // 确保响应数据是正确的，并且提取出需要的数据  
                    this.treeData=response;
                })
                .catch((error) => {
                    alert("查询失败"); // 显示失败警告  
                    console.error(error); // 在控制台打印错误信息  
                });
        },
        submitForm() {
            $http
                .get('api/rbac_User/UserSelects')
                .then((res) => {
                    this.tableData = res;
                    console.log(res)
                })
                .catch((err) => {
                    alert("查询失败"), console.log(err);
                });

        },

        //刷新
        ShuaXin() {
            this.loading = true
            this.QingKong();

            setTimeout(() => {
                this.loading = false;
            }, 2000);
        },
        //清空
        QingKong() {
            this.formInline.region = '\0',
                this.formInline.GYS = '',
                this.formInline.user = '',
                this.qsj = '',
                this.hsj = ''
        },

        //获取多选中的编号,状态
        Huoqvxinxi() {
            this.Idbh = [];//存储序号(id)
            this.Ztzd = [];//存储状态
            const selectedRows = this.$refs.AdateMZ.selection; // 获取选中的行数据
            const data = selectedRows.map(row => { return { '序号': row.id }; });//获取序号
            const data2 = selectedRows.map(row => { return { '状态': row.sure_state }; });//获取状态

            for (let i = 0; i < data.length; i++) {
                this.Idbh.push(data[i]['序号']);
            }
            for (let i = 0; i < data2.length; i++) {
                this.Ztzd.push(data2[i]['状态']);
            }
            console.log('序号：' + this.Idbh);
            console.log('状态：' + this.Ztzd);
        },
        //条数改变
        handleSizeChange(val) {
            this.mys = val;
            this.cha();
        },
        //页数改变
        handleCurrentChange(val) {
            this.dqy = val;
            this.cha();
        },
        //字段处理
        formatItemNames(itemNames) {
            if (itemNames && itemNames.length > 5) {
                return itemNames.slice(0, 5) + "...";
            } else if (itemNames) {
                return itemNames;
            } else {
                return "";
            }
        },
        //当前时间获取 年月日
        dangqianTime() {
            const date = new Date();
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);

            this.currenTime = `${year}-${month}-${day}`;
            this.ShenHesj = this.currenTime
        },
    },
    created() {  
    // 在组件创建时调用quanxian方法获取数据  
    this.quanxian();  
  }  ,
    mounted() {
        this.submitForm();

        this.formatItemNames()
        this.ShuaXin()
    },

}
</script>

<style scoped></style>